<template>
  <div>
    <navBar :title="title" :route="route"></navBar>
    <!-- 上拉下拉 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div class="tabFor" v-for="(item,index) in 10" >
      <div class="leftImg">
        <van-image  src="https://img.yzcdn.cn/vant/cat.jpeg" class="img" />
      </div>
      <div class="content">
        <h3>大司马：同学们今天铁牌讲师的招牌被我一脚奥术大师大所大所</h3>
        <p>2022-01-33</p>
        <p class="time">
          <span>芜湖大司马丶</span><span>2000阅读</span>
        </p>
      </div>
    </div>

        <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</van-pull-refresh>
  </div>
</template>

<script>
import Picture from '../../assets/banner1.jpg'
import navBar from '@/components/navBar.vue'
export default {
  components:{
      navBar
  },
  data() {
    return {
      count: 0,
      isLoading: false,
      Picture,
      title:'院校章程', // 导航标题
      route:'Signout',  // 导航返回跳转路由
       list: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push('/Signout')
    },
    InstitutionCharter(){
      this.$router.push('/InstitutionCharter')
    },
        onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        // for (let i = 0; i < 10; i++) {
        //   this.list.push(this.list.length + 1);
        // }

        this.loading = false;

        // if (this.list.length >= 40) {
        //   this.finished = true;
        // }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },


};
</script>

<style scoped>

  .tabFor{
    margin-top: 10px;
    padding: 0 10px;
    display: flex;
    justify-content: center;

  }
  .tabFor:last-child{
    margin-bottom: 50px;
  }
  .tabFor>div{
    margin: 0 7px;
  }
  .tabFor .leftImg{
    flex: 3;
  }
  .tabFor .leftImg .img{
    flex: 3;
  }
  .tabFor .content{
    flex: 7;
    margin-top: -14px;
  }
  .tabFor .content h3{
    font-size: 12px;
    font-weight: normal;
    color: rgba(80, 80, 80, 1);
  }
  .tabFor .content p{
    font-size: 12px;
    color: rgba(153, 153, 153, 1);
    margin-top: -5px;
  }
  .tabFor .content .time{
    display: flex;
    justify-content: space-between;
  }
  .tabFor .content span{
    font-size: 12px;
    color: rgba(153, 153, 153, 1);
  }











  .box1{
   margin-left: 15px;
   margin-top: 20px;
}
.box1 img{
   width: 114px;
   height: 77px;

   float: left;
}
.box1 p{
	color: rgba(80, 80, 80, 1);
	font-size: 12px;
	line-height: 150%;
  margin-left: 60px;
}
.box1 div{
	color: rgba(153, 153, 153, 1);
	font-size: 11px;
	line-height: 150%;
	text-align: left;
  padding-left: 60px;

}
.PictureSize div span{
  text-align: right;
  	color: rgba(153, 153, 153, 1);
	font-size: 11px;
	line-height: 150%;
  margin-left: 100px;
}
</style>
